<template>
	<view class="container">
		<!--出库表单-->
		<view class="form-section">
			<view class="form-card">
				<view class="form-header">
					<text class="form-title">出库申请</text>
					<view class="form-status" :class="getStatusClass(formData.status)">
						{{getStatusText(formData.status)}}
					</view>
				</view>
				
				<view class="form-item">
					<text class="form-label">申请编号</text>
					<text class="form-value">{{formData.code}}</text>
				</view>
				
				<view class="form-item">
					<text class="form-label">申请日期</text>
					<text class="form-value">{{formData.date}}</text>
				</view>
				
				<view class="form-item">
					<text class="form-label">申请人</text>
					<text class="form-value">{{formData.applicant}}</text>
				</view>
				
				<view class="form-item">
					<text class="form-label">出库类型</text>
					<picker 
						:value="formData.typeIndex" 
						:range="outboundTypes" 
						@change="onTypeChange"
					>
						<view class="picker-value">
							<text>{{outboundTypes[formData.typeIndex]}}</text>
							<image src="/static/arrow-right-gray.png" class="picker-arrow" />
						</view>
					</picker>
				</view>
				
				<view class="form-item">
					<text class="form-label">备注说明</text>
					<textarea 
						class="form-textarea" 
						placeholder="请输入出库原因或备注信息"
						v-model="formData.remark"
						maxlength="200"
					></textarea>
				</view>
			</view>
		</view>
		
		<!--物料选择-->
		<view class="materials-section">
			<view class="section-header">
				<text class="section-title">出库物料</text>
				<view class="add-btn" @click="showMaterialPicker = true">
					<text>+ 添加物料</text>
				</view>
			</view>
			
			<view class="materials-list">
				<view 
					class="material-item" 
					v-for="(item, index) in selectedMaterials" 
					:key="index"
				>
					<view class="material-info">
						<image :src="item.image" class="material-image" />
						<view class="material-details">
							<text class="material-name">{{item.name}}</text>
							<text class="material-code">{{item.code}}</text>
							<text class="material-stock">库存: {{item.stock}}{{item.unit}}</text>
						</view>
					</view>
					<view class="material-quantity">
						<view class="quantity-control">
							<view class="quantity-btn" @click="decreaseQuantity(index)">-</view>
							<input 
								class="quantity-input" 
								type="number" 
								v-model="item.quantity"
								@input="onQuantityChange(index)"
							/>
							<view class="quantity-btn" @click="increaseQuantity(index)">+</view>
						</view>
						<view class="quantity-unit">{{item.unit}}</view>
					</view>
					<view class="material-remove" @click="removeMaterial(index)">
						<text>×</text>
					</view>
				</view>
			</view>
		</view>
		
		<!--操作按钮-->
		<view class="action-section">
			<view class="action-buttons">
				<view class="btn-secondary" @click="saveDraft">保存草稿</view>
				<view class="btn-primary" @click="submitOutbound">提交出库</view>
			</view>
		</view>
		
		<!--物料选择弹窗-->
		<view class="picker-modal" v-if="showMaterialPicker" @click="showMaterialPicker = false">
			<view class="picker-content" @click.stop>
				<view class="picker-header">
					<text class="picker-title">选择物料</text>
					<text class="picker-close" @click="showMaterialPicker = false">×</text>
				</view>
				
				<view class="picker-search">
					<image src="/static/search.png" class="search-icon" />
					<input 
						class="search-input" 
						placeholder="搜索物料名称或编码"
						v-model="searchKeyword"
					/>
				</view>
				
				<view class="picker-list">
					<view 
						class="picker-item" 
						v-for="(item, index) in filteredMaterials" 
						:key="index"
						@click="selectMaterial(item)"
					>
						<image :src="item.image" class="picker-item-image" />
						<view class="picker-item-info">
							<text class="picker-item-name">{{item.name}}</text>
							<text class="picker-item-code">{{item.code}}</text>
							<text class="picker-item-stock">库存: {{item.stock}}{{item.unit}}</text>
						</view>
						<view class="picker-item-status" :class="getStockStatusClass(item.stock)">
							{{getStockStatusText(item.stock)}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	
	// 表单数据
	const formData = ref({
		code: 'CK' + new Date().getTime().toString().slice(-8),
		date: new Date().toLocaleDateString(),
		applicant: '张三',
		typeIndex: 0,
		remark: '',
		status: 'draft'
	});
	
	const outboundTypes = ['维修出库', '生产出库', '销售出库', '其他出库'];
	const searchKeyword = ref('');
	const showMaterialPicker = ref(false);
	
	// 已选择的物料
	const selectedMaterials = ref([]);
	
	// 可选择的物料列表
	const availableMaterials = ref([
		{
			id: 1,
			name: '螺丝刀套装',
			code: 'SD001',
			stock: 45,
			unit: '套',
			image: '/static/tools.png'
		},
		{
			id: 2,
			name: '轴承',
			code: 'ZC002',
			stock: 8,
			unit: '个',
			image: '/static/parts.png'
		},
		{
			id: 3,
			name: '润滑油',
			code: 'RHY003',
			stock: 0,
			unit: '瓶',
			image: '/static/materials.png'
		},
		{
			id: 4,
			name: '扳手',
			code: 'BS004',
			stock: 32,
			unit: '把',
			image: '/static/tools.png'
		},
		{
			id: 5,
			name: '密封圈',
			code: 'MFQ005',
			stock: 12,
			unit: '个',
			image: '/static/parts.png'
		}
	]);
	
	// 筛选后的物料列表
	const filteredMaterials = computed(() => {
		if (!searchKeyword.value) return availableMaterials.value;
		
		return availableMaterials.value.filter(item => 
			item.name.includes(searchKeyword.value) || 
			item.code.includes(searchKeyword.value)
		);
	});
	
	const onTypeChange = (e: any) => {
		formData.value.typeIndex = e.detail.value;
	};
	
	const selectMaterial = (material: any) => {
		// 检查是否已经选择
		const exists = selectedMaterials.value.find(item => item.id === material.id);
		if (exists) {
			uni.showToast({
				title: '该物料已添加',
				icon: 'none'
			});
			return;
		}
		
		// 添加到选择列表
		selectedMaterials.value.push({
			...material,
			quantity: 1
		});
		
		showMaterialPicker.value = false;
		searchKeyword.value = '';
	};
	
	const removeMaterial = (index: number) => {
		selectedMaterials.value.splice(index, 1);
	};
	
	const increaseQuantity = (index: number) => {
		const item = selectedMaterials.value[index];
		if (item.quantity < item.stock) {
			item.quantity++;
		} else {
			uni.showToast({
				title: '超出库存数量',
				icon: 'none'
			});
		}
	};
	
	const decreaseQuantity = (index: number) => {
		const item = selectedMaterials.value[index];
		if (item.quantity > 1) {
			item.quantity--;
		}
	};
	
	const onQuantityChange = (index: number) => {
		const item = selectedMaterials.value[index];
		const quantity = parseInt(item.quantity);
		
		if (isNaN(quantity) || quantity < 1) {
			item.quantity = 1;
		} else if (quantity > item.stock) {
			item.quantity = item.stock;
			uni.showToast({
				title: '超出库存数量',
				icon: 'none'
			});
		}
	};
	
	const getStatusClass = (status: string) => {
		const statusMap = {
			'draft': 'status-draft',
			'pending': 'status-pending',
			'approved': 'status-approved',
			'rejected': 'status-rejected'
		};
		return statusMap[status] || 'status-draft';
	};
	
	const getStatusText = (status: string) => {
		const statusMap = {
			'draft': '草稿',
			'pending': '待审核',
			'approved': '已通过',
			'rejected': '已拒绝'
		};
		return statusMap[status] || '草稿';
	};
	
	const getStockStatusClass = (stock: number) => {
		if (stock === 0) return 'stock-out';
		if (stock < 10) return 'stock-low';
		return 'stock-normal';
	};
	
	const getStockStatusText = (stock: number) => {
		if (stock === 0) return '缺货';
		if (stock < 10) return '低库存';
		return '正常';
	};
	
	const saveDraft = () => {
		uni.showToast({
			title: '草稿已保存',
			icon: 'success'
		});
	};
	
	const submitOutbound = () => {
		if (selectedMaterials.value.length === 0) {
			uni.showToast({
				title: '请选择出库物料',
				icon: 'none'
			});
			return;
		}
		
		uni.showModal({
			title: '确认出库',
			content: '确定要提交出库申请吗？',
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '出库申请已提交',
						icon: 'success'
					});
					formData.value.status = 'pending';
				}
			}
		});
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		background: #F9FAFB;
		height: 100vh;
	}

	.form-section {
		padding: 24rpx;
	}

	.form-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
	}

	.form-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #F5F6FA;
	}

	.form-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #222;
	}

	.form-status {
		padding: 8rpx 16rpx;
		border-radius: 16rpx;
		font-size: 24rpx;
	}

	.status-draft {
		background: #f0f0f0;
		color: #666;
	}

	.status-pending {
		background: #fff7e6;
		color: #faad14;
	}

	.status-approved {
		background: #f6ffed;
		color: #52c41a;
	}

	.status-rejected {
		background: #fff2f0;
		color: #ff4d4f;
	}

	.form-item {
		margin-bottom: 24rpx;
	}

	.form-label {
		display: block;
		font-size: 28rpx;
		font-weight: 500;
		color: #222;
		margin-bottom: 12rpx;
	}

	.form-value {
		font-size: 28rpx;
		color: #666;
	}

	.picker-value {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #F5F6FA;
	}

	.picker-arrow {
		width: 24rpx;
		height: 24rpx;
	}

	.form-textarea {
		width: 100%;
		height: 120rpx;
		padding: 16rpx;
		border: 1rpx solid #F5F6FA;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #333;
		background: #fff;
	}

	.materials-section {
		flex: 1;
		padding: 0 24rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #222;
	}

	.add-btn {
		display: flex;
		align-items: center;
		padding: 12rpx 20rpx;
		background: #1890ff;
		border-radius: 24rpx;
		color: #fff;
		font-size: 26rpx;
	}

	.materials-list {
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.material-item {
		display: flex;
		align-items: center;
		padding: 24rpx;
		border-bottom: 1rpx solid #F5F6FA;
	}

	.material-item:last-child {
		border-bottom: none;
	}

	.material-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.material-image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 12rpx;
		margin-right: 16rpx;
	}

	.material-details {
		display: flex;
		flex-direction: column;
	}

	.material-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #222;
		margin-bottom: 4rpx;
	}

	.material-code {
		font-size: 24rpx;
		color: #888;
		margin-bottom: 4rpx;
	}

	.material-stock {
		font-size: 22rpx;
		color: #b0b0b0;
	}

	.material-quantity {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 16rpx;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		border: 1rpx solid #F5F6FA;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.quantity-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F5F6FA;
		font-size: 28rpx;
		color: #666;
	}

	.quantity-input {
		width: 80rpx;
		height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		background: #fff;
	}

	.quantity-unit {
		font-size: 22rpx;
		color: #888;
		margin-top: 8rpx;
	}

	.material-remove {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff2f0;
		border-radius: 50%;
		color: #ff4d4f;
		font-size: 32rpx;
	}

	.action-section {
		padding: 24rpx;
		background: #fff;
		border-top: 1rpx solid #F5F6FA;
	}

	.action-buttons {
		display: flex;
		gap: 16rpx;
	}

	.btn-secondary {
		flex: 1;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #ddd;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #666;
	}

	.btn-primary {
		flex: 1;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #1890ff;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #fff;
	}

	.picker-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		display: flex;
		align-items: flex-end;
	}

	.picker-content {
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		width: 100%;
		max-height: 80vh;
	}

	.picker-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border-bottom: 1rpx solid #F5F6FA;
	}

	.picker-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #222;
	}

	.picker-close {
		font-size: 40rpx;
		color: #888;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.picker-search {
		display: flex;
		align-items: center;
		margin: 24rpx;
		padding: 0 20rpx;
		background: #F5F6FA;
		border-radius: 24rpx;
		height: 72rpx;
	}

	.search-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.picker-list {
		max-height: 60vh;
		overflow-y: auto;
	}

	.picker-item {
		display: flex;
		align-items: center;
		padding: 24rpx;
		border-bottom: 1rpx solid #F5F6FA;
	}

	.picker-item:last-child {
		border-bottom: none;
	}

	.picker-item-image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 12rpx;
		margin-right: 16rpx;
	}

	.picker-item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.picker-item-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #222;
		margin-bottom: 4rpx;
	}

	.picker-item-code {
		font-size: 24rpx;
		color: #888;
		margin-bottom: 4rpx;
	}

	.picker-item-stock {
		font-size: 22rpx;
		color: #b0b0b0;
	}

	.picker-item-status {
		padding: 8rpx 16rpx;
		border-radius: 16rpx;
		font-size: 22rpx;
	}

	.stock-normal {
		background: #f6ffed;
		color: #52c41a;
	}

	.stock-low {
		background: #fffbe6;
		color: #faad14;
	}

	.stock-out {
		background: #fff2f0;
		color: #ff4d4f;
	}
</style>